<template>
    <div class='slideshow'>
        <!-- 随机推荐的店铺 -->
        <div class="classify">
            <div class='index-container'>
                <div class="clearfix">
                    <!-- 左边导航条 -->
                    <div class='left-banner'>
                        <div class="category">
                            <div class="title1">
                                <span class="nav-title" >
                                    全部分类
                                </span>
                            </div>
                            <div class="content">
                                <ul>
                                    <li class='nav-li' @mouseenter="like(nav.tagsId,nav.tags)" @mouseleave="out(nav.tagsId,nav.tags)" v-for="(nav,index) in navli" :key="index">
                                        <router-link class='nav-li-tag' :to="`/dining/${nav.tagsId}`">{{nav.tags}}</router-link>
                                        <i class='el-icon-arrow-right'></i>
                                        <div class="son-nav"  @mouseenter="like(nav.tagsId,nav.tags)" @mouseleave="out(nav.tagsId,nav.tags)">
                                            <div class="detail">
                                                <div class="detail-title">
                                                    <h2>{{nav.tags}}</h2>   
                                                </div>
                                                <!-- 小标签 -->
                                                <div class="detail-content">
                                                     <router-link :to="`/dining/${nav.tagsId}`" class='class-text' v-for="(tag,index) in tags" :key="index">{{tag}}</router-link>  
                                                    <!-- <a href="#" class='class-text' v-for="(tag,index) in tags" :key="index">{{tag}}</a>   -->
                                                </div>
                                            </div>  
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 右边轮播图 -->
                    <div class="right-banner">
                        <!-- 上边 -->
                        <div class="banner-row">
                             <!-- 轮播图 -->
                            <div class="block">
                                <el-carousel trigger="click" height="270px">
                                    <el-carousel-item v-for="(img,index) in imgs" :key="index">
                                        <img :src="img" alt="轮播图" />
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <!-- 登录 -->
                            <div class="logincard">
                                <!-- 头像 -->
                                <div class="default">
                                    <div class="demo-type">
                                        <div class='userImg' style="text-align:center">
                                            <img :src="this.avatar" alt="头像" v-if="this.userId!=null" >
                                            <el-avatar icon="el-icon-user-solid" v-if="this.userId == null"></el-avatar>
                                        </div>
                                    </div> 
                                    <!-- 用户名 -->
                                    <p class="username">Hi,你好</p>
                                    <div class='no-login' v-if="this.userId == null">
                                         <!-- 注册 -->
                                         <router-link to="/login" class='btn-login'>注册</router-link>                                        
                                        <!-- 立即登录 -->
                                        <router-link to="/login" class='btn-login'>立即登录</router-link>
                                    </div>
                                   <!-- 登录以后的状态 -->
                                   <div class='have' v-if="this.userId!=null">
                                       <router-link class='btn-login' to="/personal">个人中心</router-link>
                                       <button class='btn-login' @click='loginOut'>退出</button>
                                       
                                   </div>  
                                </div>   
                            </div>
                        </div>
                        <!-- 下边 -->
                        <div class="banner-row">
                            <div class='pics'>
                                <a class='link' v-for="(small,index) in smallImg" :key="index">
                                    <div class='pic'>
                                        <img :src="small" alt="小图片"/>
                                    </div>
                                </a> 
                            </div>
                            <!-- 二维码 -->
                           <div class='app'>
                               <div class='box'></div>
                               <p class="name">逛逛二维码</p>
                           </div>
                            
                        </div>
                    </div>
                </div>
            </div>         
        </div>
    </div>
</template>
<script>
// import cookie from '../../cookie/index'
// import jwtDecode from 'jwt-decode'
import {All, SecondTags,getShowImg,getShowSmall,out} from '../../../api/commonReq/front/index/data.js'
export default {
    name:'Slideshow',
    props: {
      msg: String
    },
    data() {
        return {
            navli:null,
            tags:null,
            userId:null,
            userName:null,
            userImg:null,
            imgs:null,
            smallImg:null,
            avatar:null
        }
    },
    mounted() {
        this.userId = this.$store.state.store.userMsg.userId
        this.avatar = this.$store.state.store.userMsg.avatar
        console.log('xiaodiandian');
        console.log(this.userId);
        console.log(this.avatar);
        // 一级标签
        All().then(data=>{
             this.navli = data.data.data
        })
        // 遍历轮播图的4张图片
        getShowImg().then(data=>{
             this.imgs = data.data.data
        })
        ///轮播图下边的小图片
        getShowSmall().then(data=>{
           this.smallImg = data.data.data
        })   
    },
    methods: {
        like(a,b){           
            console.log(b);
            var son = document.getElementsByClassName('son-nav');
            son[a-2].style.display = 'block';
            SecondTags(a).then(data=>{
                this.tags = data.data.data
            })
        },
        out(a,b){
            var son = document.getElementsByClassName('son-nav');
            son[a-2].style.display = 'none'
            console.log(b);
        },
       
        //    退出登录
        loginOut(){
            this.$confirm('是否确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                out().then(data=>{
                    if(data.data.code === 200){
                        this.$message({
                            type: 'success',
                            message: '退出成功!'
                        });
                        this.$router.push({ name:'login' })
                        // cookie.removeToken()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });          
            });
        }
    },
}
</script>
<style lang="less" scoped>
    /* 随机推荐的店铺 */
    .classify{
        width: 100%;
    }
    .block{
        margin: 0 auto;
        img{
            width:100%;
            height:100%
        }
    }
    .index-container{
        width:90%;
        margin:0 auto;

    }
    .clearfix{
        position: relative;
        width:100%;
        margin: 0 auto;
        display: flex;
        
    }
    /* 左边导航条 */
    .left-banner{
        width: 20%;
    }
    .category{
        width: 100%;
        height: 525px;
        position: relative;
        text-align: left;
        /* box-sizing: border-box; */
        float: left;
        margin-top: -50px;
        color: #646464;
        background: #FFF;
        box-sizing: border-box;
        border: 1px solid #E5E5E5;
    }
    .title1{
        height: 50px;
        padding-top: 15px;
        box-sizing: border-box;
    }
    .nav-title{
        color: #222222;
        font-size: 16px;
        font-weight: 700;
        margin-left: 15px
    }
    .content ul{
        padding: 10px 0 8px;
        height: 475px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
       
    }
    .nav-li{
        box-sizing: border-box;
        padding: 2px 12px;
        height: 26px;
        list-style: none;
        cursor: pointer;
        a{
            text-decoration: none;
            color:black;
            cursor: pointer;
        }
    }
    .nav-li:hover{
        background: rgba(255,150,0,0.08);
        color: #222222;
    }
    .nav-li i{
        float:right;
        line-height: 26px;
    }
    .son-nav{
        display: none;
        position: absolute;
        top: 60px;
        left: 224px;
        width: 400px;
        height: 464px;
        background-color: #fff;
        z-index: 199;
        color: #666;
        overflow: hidden;
    }
    .detail{
        padding: 0 30px;
    }
    .detail-title{
        margin-top: 24px;
        height: 22px;
        line-height: 22px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e5e5;
    }
    .class-text{
        color: #999;
        font-size: 12px;
        line-height: 15px;
        display: inline-block;
        margin-right: 16px;
        margin-top: 10px;
        cursor: pointer;
    }
    .class-text:hover{
        color: cornflowerblue;
    }
    /* 右边的部分 */
    .right-banner{
        margin-left: 10px;
        margin-top: 10px;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 80%;
    }
    .banner-row{
        display: flex;
    }
    .block{
        width: 73%;
        margin-right:10px;
    }
    .el-carousel__item h3 {
        color: red;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px; 
        /* margin: 0; */
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    /* 登录 */
    .logincard{
        width: 26%;
        height: 268px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
    }
    .default{
        padding-top: 40px;
        position: relative;
        display: block;
        .userImg{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin:0 auto;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
    /* 用户名 */
    .username{
        font-size: 16px;
        color: #222;
        text-align: center;
        font-weight: 500;
        white-space: nowrap;
        width: 6em;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 auto;
    }
    /* 登录注册 */
    .btn-login{
        width: 118px;
        text-align: center;
        margin: 15px auto 15px auto;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 40px;
        font-size: 14px;
        color: #333;
        transition: background-color 0.5s;
        display: block;
        line-height: 38px;
        text-decoration: none;
        border:none;
        outline: none;
    }
    /* 下边 */
    .pics{
        display: flex;
        width: 74%;
    }
    .link{
        width: 50%;
        margin-right: 10px;
    }
    .pic{
       
        height: 185px;
        background-size: 270px;
        background-repeat: no-repeat;
        margin-top: 10px;
        /* margin-right: 10px; */
        background-color:red;
        img{
            width:100%;
            height: 100%;
        }
    }
    /* 二维码 */
    .app{
        width: 26%;
        height: 185px;
        margin-top: 10px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
    }
    .box{
        width: 105px;
        height:105px;
        background-color: gold;
        margin: 10px auto 0 auto;
    }
    .name{
        font-size: 16px;
        color: #222222;
        font-weight: 500;
        padding-left:75px ;
        padding-top: 7px;
    }
</style>